<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>flex排版</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		body{
			width: 100%;
			height: 2000px;
		}
		header{
			height: 170px;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}
		.q1 p:nth-child(1){
			font-size: 24px;
			margin:5px 0;

		}
		.q2{
			
			position:relative;
		}
		.q2 img{
			position:absolute;
			top:36px;
			left:195px;
		}
		.q2 input{
			line-height: 110px;
			border:none;
			text-align: center;
			width:584px;
			height: 110px;
			background:#f4f4f4;
			border-radius: 20px;
			font-size: 24px;
			color: #ccc;
		}
		main{
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 200px;
		}
		main dl dd{
			text-align: center;
			margin:10px 0;
		}
		section{
			
			justify-content: space-around;
			align-items: center;
		}
		section h3{
			font-size: 35px;
			color: #000;
			padding-left: 20px;
			margin:15px 0;
		}
		section .div-n img{
			text-align: center;
			width: 100%;
		}
		article img{
			width: 100%;
		}
		footer{
			height: 145px;
			display: flex;
			background:#fff;
			width: 100%;
			justify-content: space-around;
			align-items: center;
			position: fixed;
			bottom:0;
		}
		footer dl{
			text-align: center;
		}
		footer dl dd{
			margin:10px 0;
			font-size: 24px;
		}
		.w1{
			color: #08b1ba;
		}
		.div-n{
			
			padding-left:30px;
			padding-right:30px;
		} 
	</style>
</head>
<body>
	<header>
		<img src="img/1.png" alt="">
		<div class="q1">
			<p>北京&nbsp;&nbsp;<img src="img/22.png" alt=""></p>
			<p>晴&nbsp;&nbsp;30°</p>
		</div>
		<div class="q2">
		<img src="img/2.png" alt="">
		<input type="text" value="马记(外卖)">
		</div>
		<img src="img/21.png" alt="">
	</header>
	<main>
		<dl>
			<dt> <img src="img/3.png" alt=""> </dt>
			<dd>美食</dd>
		</dl>
		<dl>
			<dt> <img src="img/4.png" alt=""> </dt>
			<dd>电影/演出</dd>
		</dl>
		<dl>
			<dt> <img src="img/5.png" alt=""> </dt>
			<dd>酒店住宿</dd>
		</dl>
		<dl>
			<dt> <img src="img/6.png" alt=""> </dt>
			<dd>休闲娱乐</dd>
		</dl>
		<dl>
			<dt> <img src="img/7.png" alt=""> </dt>
			<dd>外卖</dd>
		</dl>
		</main>
		<main>
		<dl>
			<dd> <img src="img/8.png" alt=""> </dd>
			<dt>跑腿代购</dt>
		</dl>
		<dl>
			<dd> <img src="img/9.png" alt=""> </dd>
			<dt>生活服务</dt>
		</dl>
		<dl>
			<dd> <img src="img/10.png" alt=""> </dd>
			<dt>周边游/旅游</dt>
		</dl>
		<dl>
			<dd> <img src="img/11.png" alt=""> </dd>
			<dt>结婚/摄影</dt>
		</dl>
		<dl>
			<dd> <img src="img/12.png" alt=""> </dd>
			<dt>丽人/美发</dt>
		</dl>
	</main>
	<main>
		<dl>
			<dd> <img src="img/24.png" alt=""> </dd>
			<dt>景点/门票</dt>
		</dl>
		<dl>
			<dd> <img src="img/23.png" alt=""> </dd>
			<dt>医疗/牙科</dt>
		</dl>
		<dl>
			<dd> <img src="img/14.png" alt=""> </dd>
			<dt>超市/生鲜</dt>
		</dl>
		<dl>
			<dd> <img src="img/15.png" alt=""> </dd>
			<dt>家居/装修</dt>
		</dl>
		<dl>
			<dd> <img src="img/13.png" alt=""> </dd>
			<dt>更多</dt>
		</dl>
	</main>
	<section>
		<h3>新人见面礼</h3>
		<div class="div-n">
		<img src="img/16.png" alt="">
		</div>
	</section>
	<article>
		<img src="img/26.png" alt="">
	</article>
	<footer>
		<dl>
			<dt> <img src="img/17.png" alt=""> </dt>
			<dd class="w1">首页</dd>
		</dl>
		<dl>
			<dt> <img src="img/18.png" alt=""> </dt>
			<dd>发现</dd>
		</dl>
		<dl>
			<dt> <img src="img/19.png" alt=""> </dt>
			<dd>订单</dd>
		</dl>
		<dl>
			<dt> <img src="img/20.png" alt=""> </dt>
			<dd>我的</dd>
		</dl>
	</footer>
</body>
</html>